<template>
  <div class="h-full">
    <Card size="small" :bordered="false" class="w-4/4 w-full !mt-0 !rounded-lg h-full !p-6px">
      <template #title>
        <div class="flex items-center cursor-pointer" @click="goRoute(cardData.title)">
          <div>{{ cardData.title }}</div>
          <Icon icon="material-symbols:arrow-right-alt" v-if="cardData.go" />
        </div>
      </template>
      <template #extra>
        <Button
          class="mr-2"
          size="small"
          v-if="cardData.addText !== null"
          type="primary"
          @click="cardClick(cardData.addText)"
          >{{ cardData.addText }}</Button
        >
        <Select
          ref="select"
          v-model:value="selectValue"
          style="width: 120px"
          v-if="cardData.title === '仪表盘'"
        >
          <SelectOption value="最近查看">最近查看</SelectOption>
          <SelectOption value="已收藏">已收藏</SelectOption>
        </Select>
      </template>
      <div v-if="cardData.type === 'number'" class="flex justify-center">
        <div
          v-for="(item, index) in cardData.value"
          :key="index"
          class="w-1/3 h-25 rounded-2xl m-1 p-5"
          :style="{ backgroundColor: item.color }"
        >
          <div class="cursor-pointer" @click="goRoute(cardData.title)">
            <span>{{ item.title }}</span>
            <Icon icon="material-symbols:arrow-right-alt" />
          </div>
          <div>
            <span>{{ item.data }}</span>
            <Icon :icon="item.icon" v-if="item.icon !== ''" />
          </div>
        </div>
      </div>
      <div v-if="cardData.type === 'Array'" class="h-20">
        <Tag class="text-base" v-for="(item, index) in cardData.value" :key="index">{{
          item.name
        }}</Tag>
      </div>
      <div v-if="cardData.type === 'select'" class="h-full">
        <span>{{ cardData.value }}</span>
      </div>
    </Card>
    <EditModal @register="register" :minHeight="100" />
  </div>
</template>

<script setup lang="ts">
  import { Card, Button, Tag, Select, SelectOption } from 'ant-design-vue';
  import Icon from '/@/components/Icon';
  import { ref } from 'vue';
  import EditModal from './EditModal.vue';
  import { useModal } from '/@/components/Modal';
  import { useGo } from '/@/hooks/web/usePage';
  const go = useGo();
  const [register, { openModal }] = useModal();

  const props = defineProps({
    cardData: {
      type: Object,
      default: () => ({}),
    },
  });
  let selectValue = ref<any>('最近查看');

  function cardClick(value) {
    if (value === '编辑') {
      openModal(true, {
        title: value,
        arr: props.cardData.value,
      });
    }
  }
  function goRoute(value) {
    if (value === '设备') {
      go({
        name: 'Device',
        params: {
          key: value,
        },
      });
    } else if (value === '告警') {
      go({
        name: 'alarm',
        params: {
          key: value,
        },
      });
    }
  }
</script>
